<template>
  <div class="collect">
    <div class="tab">
      <van-tabs
        :active="active"
        line-width="24"
        line-height="3"
        :border="false"
        color="#187798"
        sticky
        @change="tabChange"
      >
        <van-tab :title="item" :name="item" v-for="(item,index) in tabList" :key="index">
          <!-- 内容 -->
          <div class="content" v-if="list.length>0">
            <div class="mainBody" v-for="(e,j) in  list" :key="j" @click="handleJump(e)">
              <div class="flex align-center">
                <div class="icon">
                  <span>{{e.auditStatus==='RAISING'?"募集中":e.auditStatus==='COMPLETE'?"已完成":"回款中"}}</span>
                </div>
                <span style="color:#909292;font-size:12px">({{e.productNo}})</span>
              </div>
              <div class="flex">
                <div style="width:60%">
                  <div class="name ellipsis">{{e.name}}</div>
                  <div class="flex ellipsis">
                    <p class="label">{{e.classifyName}}</p>
                    <p class="label">{{e.startingAmount}}万元起投</p>
                  </div>
                </div>
                <div class="right">
                  <div
                    class="percent"
                    v-if="e.baseComparison.length===1"
                  >{{e.baseComparison[0].prop}}%</div>
                  <div
                    class="percent"
                    v-else
                  >{{e.baseComparison[0].prop}}%~{{e.baseComparison[e.baseComparison.length-1].prop}}%</div>
                  <div class="month">{{e.raisingPeriod}}个月</div>
                </div>
              </div>
            </div>
            <div>
              <div class="activeMore" v-if="!loadMore && list.length>0">—— 已经到底啦 ——</div>
            </div>
          </div>
          <!-- 无数据 -->
          <!-- 无内容 -->

          <div class="empty" v-if="!loadMore && list.length===0">
            <div style="text-align:center">
              <img class="emptyIcon" src="/static/images/user/collect_icon.png" alt />
              <p style="font-size:14px;color:#909292">暂无收藏</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { myCollection } from "@/api/api";
export default {
  data() {
    return {
      active: 0,
      activeIndex: 0,
      type: 0,

      tabList: ["全部", "募集中", "回款中", "已完成"],
      list: [],
      loadMore: true,
      identity: "",
      // 列表分页
      pages: {
        pageIndex: 1,
        pageSize: 10,
        audit: ""
      }
    };
  },
  onShow() {
    Object.assign(this.$data, this.$options.data());
    this.loadMore = true;
    this.identity = this.$mp.query.identity;
    this.active = this.activeIndex;
    this.myCollection();
  },
  // // 下拉刷新
  // onPullDownRefresh () {
  //   this.list = [];
  //   this.pages.pageIndex = 1;
  //   this.loadMore = true;
  //   this.myCollection();
  //   // 停止下拉刷新
  //   wx.stopPullDownRefresh();
  // },

  // 上拉加载更多
  onReachBottom() {
    this.myCollection();
  },
  methods: {
    /** 收藏 */
    async myCollection() {
      if (this.loadMore) {
        wx.showLoading({
          title: "加载中",
          mask: true
        });
        await myCollection(this.pages).then(res => {
          wx.hideLoading();
          var data = res.list;
          this.list = this.list.concat(data);
          ++this.pages.pageIndex;
          if (res.pages < this.pages.pageIndex) {
            this.loadMore = false;
          }
        });
      }
    },
    tabChange(e) {
      this.loadMore = true;
      this.activeIndex = e.target.index;
      this.pages.pageIndex = 1;
      this.list = [];
      console.log(this.activeIndex);
      console.log(e.target);
      switch (this.activeIndex) {
        case 0: // 我的产品
          this.pages.audit = "";
          break;
        case 1: // 我的产品
          this.pages.audit = "RAISING";
          break;
        case 2: // 我的产品
          this.pages.audit = "IN_COLLECTION";
          break;
        default:
          this.pages.audit = "COMPLETE";
          break;
      }
      this.myCollection();
      // wx.showToast({
      //   title: `切换到标签 ${event.detail.name}`,
      //   icon: 'none'
      // });
    },
    /** 跳转 */
    handleJump(item) {
      wx.navigateTo({
        url: `/pages/money/children/moneyDetail/main?id=${item.id}&identity=${
          this.identity
        }&name=${item.name}`
      });
      console.log(item);
    }
  }
};
</script>
<style lang="less" scoped>
.collect {
  .emptyIcon {
    width: 229px;
    height: 175px;
    margin: 81px 0 40px;
  }

  .tab {
    width: 100%;
    height: 44px;
    width: 100%;
    background: #fff;
    z-index: 1;
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
    .tab_item {
      text-align: center;
      font-size: 13px;
      color: #909292;
      height: 48px;
      line-height: 48px;
    }

    .tab_border {
      width: 24px;
      height: 3px;
      margin: auto;
      // position: absolute;
      // bottom: 0;
      // margin-top: 13px;
      background: rgba(24, 119, 152, 1);
      border-radius: 2px;
    }
  }
  .content {
    padding: 0 15px 15px 15px;
    .right {
      border-left: 1px solid #e6e7e3;
      text-align: center;
      width: 40%;
    }

    .mainBody {
      padding: 20px 0;
      border-bottom: 0.5px solid #e6e6e6;
    }
    .percent {
      font-size: 22px;
      color: #f45247;
      font-weight: bold;
    }
    .month {
      font-size: 12px;
      color: #909292;
      margin-top: 6px;
    }
    .name {
      padding-right: 24px;
      margin: 6px 0 10px 0;
      font-size: 16px;
      font-weight: bold;
      color: #020604;
    }
    .label {
      padding: 2px 10px;
      background: #f3f7f8;
      border-radius: 2px;
      color: #187798;
      font-size: 12px;
      margin-right: 5px;
    }
    .icon {
      background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/collect.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 51px;
      height: 20px;
      font-size: 10px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      span {
        color: #fff;
        margin-left: -5px;
      }

      // background-size: 100% 100%;
    }
  }
}
</style>